<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select style="width: 110px;" @change="provinceChange" v-model="reqData.provinceId" placeholder="请选择省">
        <el-option v-for="item in provinceList" :key="item.regionId" :label="item.regionName" :value="item.regionId">
        </el-option>
      </el-select>
      <el-select style="width: 110px;" v-model="reqData.cityId" placeholder="请选择市">
        <el-option v-for="item in cityList" :key="item.regionId" :label="item.regionName" :value="item.regionId">
        </el-option>
      </el-select>
      <el-input style="width: 160px;" placeholder="大学名称" v-model="reqData.name"></el-input>
      <el-button type="primary" icon="el-icon-search" @click.native.prevent="handleSearch">
        搜索
      </el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleCreate">
        添加
      </el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText">
      <el-table-column label="ID" width="54px" prop="universityId"></el-table-column>
      <el-table-column label="大学名称" prop="universityName"></el-table-column>
      <el-table-column label="大学代码" prop="universityCode"></el-table-column>
      <el-table-column label="大学性质" prop="universityNatureShow"></el-table-column>
      <el-table-column label="大学类型" prop="universityTypeShow"></el-table-column>
      <el-table-column label="操作" align="center" width="80px">
        <template slot-scope="scope">
          <el-button size="mini" @click.native.prevent="handleEdit(scope.row.universityId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background :pager-count="pagerCount" :page-size="reqData.perPage" :current-page="reqData.curPage"
        layout="prev, pager, next" @current-change="pageChange" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getList
  } from "@/api/university"

  import {
    getChildren
  } from "@/api/region"

  import {
    errorMsg,
    successMsg
  } from "@/utils/my"

  export default {
    inject: ["reload"],
    data() {
      return {
        reqData: {
          name: '',
          provinceId: '',
          cityId: '',
          type: '',
          nature: '',
          isShowIndex: '',
          isShowData: '',
          isHot: '',
          curPage: 1,
          perPage: 20
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        delRows: [],
        delIds: "",
        emptyText: "暂无任何数据",
        regionReqData: {
          parentId: 0,
          level: 1
        },
        provinceList: [],
        cityList: [],
        typeList: [{
            id: 0,
            name: '全部'
          },
          {
            id: 1,
            name: '本科'
          },
          {
            id: 2,
            name: '专科'
          }
        ],
        natureList: [{
            id: 0,
            name: '全部'
          },
          {
            id: 1,
            name: '公办'
          },
          {
            id: 2,
            name: '民办'
          }
        ]
      }
    },

    created() {
      this.fetchRegionData()
      this.fetchData()
    },

    methods: {
      handleCreate() {
        this.$router.push({
          path: "/admin/university/create"
        })
      },

      handleSearch() {
        this.reqData.curPage = 1
        this.fetchData()
      },

      handleEdit(id) {
        this.$router.push({
          path: "/admin/university/edit/" + id
        })
      },

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        const that = this
        that.loading = true
        let tmpData = JSON.parse(JSON.stringify(that.reqData))
        tmpData.provinceId = tmpData.provinceId.length <= 0 ? 0 : parseInt(tmpData.provinceId)
        tmpData.cityId = tmpData.cityId.length <= 0 ? 0 : parseInt(tmpData.cityId)
        tmpData.type = tmpData.type.length <= 0 ? 0 : parseInt(tmpData.type)
        tmpData.nature = tmpData.nature.length <= 0 ? 0 : parseInt(tmpData.nature)
        getList(tmpData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      },

      fetchRegionData() {
        const that = this
        getChildren(that.regionReqData).then(res => {
          let data = res.data
          if (that.regionReqData.level == 1) {
            that.provinceList = []
            that.provinceList.push({
              regionId: 0,
              regionName: '全部'
            })
            for (let i = 0; i < data.length; i++) {
              that.provinceList.push(data[i])
            }
          } else if (that.regionReqData.level == 2) {
            that.cityList = []
            that.cityList.push({
              regionId: 0,
              regionName: '全部'
            })
            for (let i = 0; i < data.length; i++) {
              that.cityList.push(data[i])
            }
          }
        })
      },

      provinceChange(id) {
        this.regionReqData.parentId = id
        this.regionReqData.level = 2
        this.fetchRegionData()
        this.reqData.cityId = ''
      }

    }
  };
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
